<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>音频播放器</title>
	 <link rel="stylesheet" href="实验二 音频播放器/audio.css">
  <link rel="stylesheet" href="实验二 音频播放器/iconFont/iconfont.css">
</head>

<body>
	<audio id="my_audio" src="实验二 音频播放器/audio/song.ogg"></audio>
  <div class="play-container">
    <!-- 歌曲信息区域 -->
    <div class="play-info">
      <div class="info">
        <div class="name">当那一天来临</div>
        <div class="singer">群星</div>
        <div class="music-progress">
          <div class="music-progress-top">
            <span class="current-time">00:00</span>
            <span class="time">00:00</span>
          </div>
          <div class="music-progress-bar">
            <div class="music-progress-line"></div>
          </div>
        </div>
      </div>
    </div>
    <!-- 音乐控制器区域 -->
    <div class="play-control">
      <div class="cover">
        <img src="实验二 音频播放器/images/sunshine.jpg" alt="封面图像" width="50">
      </div>
      <div class="control">
		  <button title="上一曲">
  <span class="iconfont icon-step-backward"></span>
</button>
<button id="play" title="播放" onclick="togglePlayPause()">
  <span class="iconfont icon-caret-right"></span>
</button>
<button title="下一曲">
  <span class="iconfont icon-step-forward"></span>
</button>
<button title="音量" id="volume_button">
  <span class="iconfont icon-shengyin_shiti"></span>
</button>
<input name="volume" id="volume" class="volume-slider" min="0" max="1" step="0.1" type="range" onchange="setVolume()">
<button title="歌词" onclick="getLyric()">
  <span class="iconfont icon-geciweidianji"></span>
</button>
</div>
</div>
	</div>
	 <div class="modal" id="modal">
    <div class="modal-box">
      <div class="modal-box-top">
        <div class="modal-title">歌词</div>
        <div class="modal-close" onclick="closeLyric()">
          <span class="iconfont icon-guanbi-quxiao-guanbi"></span>
        </div>
      </div>
      <div class="modal-wrapper">
        <p>这是一个晴朗的早晨</p>
        <p>鸽哨声伴着起床号音</p>
        <p>但是这世界并不安宁</p>
        <p>和平年代也有激荡的风云</p>
        <p>准备好了吗</p>
        <p>士兵兄弟们</p>
        <p>当那一天真的来临</p>
        <p>放心吧祖国</p>
        <p>放心吧亲人</p>
        <p>为了胜利我要勇敢前进</p>
        <p>……</p>
      </div>
    </div>
  </div>
<script src="Untitled-3.js"></script>
</body>
</html>
